function random (a, b) {
  return Math.floor((Math.random() * (b - a))) + a
}
function $ (selector) {
  return document.querySelector(selector)
}
// 传入css样式
function css (element, name, value) {
  if (typeof value === 'undefined') {
    if (typeof name === 'string') {
      if (window.getComputedStyle) {
        return window.getComputedStyle(element, null)[name]
      }
      return element.currentStyle[name]
    } else if (typeof name === 'object') {
      for (var key in name) {
        element.style[key] = name[key]
      }
      return
    }
  }
  element.style[name] = value
}
// 事件监听
function on (element, eventType, callback) {
  if (element.addEventListener) {
    element.addEventListener(eventType, callback, false)
  } else {
    eventType = 'on' + eventType
    element.attachEvent(eventType, callback)
  }
}
// 淡入
function fadein (element, duration, fn) {
  element.style.display = 'block'
  element.style.opacity = 0
  animate(element, { opacity: 1 }, duration, fn)
}
// 淡出
function fadeout (elemet, duration, fn) {
  animate(elemet, { opacity: 0 }, duration, () => {
    elemet.style.display = 'none'
    fn && fn()
  })
}
const animate = (element, optins, duration, fn) => {
  clearTimeout(element.timer)
  const speed = {}
  const start = {}
  const startTime = Date.now()
  for (const key in optins) {
    start[key] = parseFloat(css(element, key))
    speed[key] = (optins[key] - start[key]) / duration
  }
  const move = () => {
    const el = Math.min(Date.now() - startTime, duration)
    for (const key in optins) {
      const result = el * speed[key] + start[key]
      element.style[key] = result + (key === 'opacity' ? '' : 'px')
    }
    if (el != duration) {
      element.timer = setTimeout(move, 16)
    } else {
      fn && fn()
    }
  }
  move()
}